<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="订单详情"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="receiver-info-box">
                <div class="receiver-info-title">收货人信息</div>
                <div class="receiver-info-main">
                    <div class="receiver-info-item">
                        <div class="receiver-info-item-name">收货人</div>
                        <div class="receiver-info-item-detail">{{orderInfo.name}} {{orderInfo.phone}}</div>
                    </div>
                    <div class="receiver-info-item">
                        <div class="receiver-info-item-name">收货地址</div>
                        <div class="receiver-info-item-detail">{{orderInfo.region_txt}}{{orderInfo.detail}}</div>
                    </div>
                </div>
            </div>

            <div class="order-info-box">
                <div class="order-info-title">订单信息</div>
                <div class="order-info-main">
                    <div class="order-info-item">
                        <div class="order-info-item-name">订单编号</div>
                        <div class="order-info-item-detail">{{orderInfo.sn}}</div>
                    </div>
                    <div class="order-info-item">
                        <div class="order-info-item-name">下单时间</div>
                        <div class="order-info-item-detail">{{orderInfo.add_time}}</div>
                    </div>
                    <div class="order-info-item">
                        <div class="order-info-item-name">订单状态</div>
                        <div class="order-info-item-detail order-status">{{orderType[orderInfo.order_type]}}</div>
                    </div>
                </div>
            </div>

            <div class="goods-info-box">
                <div class="goods-info-title">商品信息</div>
                <div
                    class="goods-item"
                    v-for="(item,index) of orderInfo.goods_list"
                    :key="index"
                    @click="goGoodsDetail(item.goods_id,item.is_upgrade)"
                >
                    <div class="goods-img-box">
                        <img
                            class="goods-img"
                            :src="item.imgs"
                        />
                    </div>
                    <div class="goods-info">
                        <div class="goods-name">{{item.title}}</div>
                        <div class="goods-format">
                            <span v-if="item.attr_values">{{item.attr_values+'，'}}</span>
                            <span>{{item.num+'件'}}</span>
                        </div>
                        <div class="goods-price">￥{{item.price_market | currency}}</div>
                    </div>
                </div>
                <div class="goods-banlance-box">
                    <div class="goods-banlance-item">商品总价：￥{{orderInfo.goods_market_price_total | currency}}</div>
                    <div class="goods-banlance-item">店主/会员特享：-￥{{parseInt(orderInfo.goods_market_price_total)-parseInt(orderInfo.goods_price_total) | currency}}</div>
                    <div class="goods-banlance-item">邮费：￥{{orderInfo.postage | currency}}</div>
                    <div class="goods-banlance-item">实付款：￥{{orderInfo.money_total | currency}}</div>
                </div>
                <div class="order-ctr-box">
                    <div
                        class="order-btn"
                        v-if="orderInfo.order_type == 1"
                        @click="orderCancle(orderInfo.id)"
                    >取消订单</div>
                    <div
                        class="order-btn"
                        v-if="orderInfo.order_type == 3 || orderInfo.order_type == 4"
                        @click="checkLogistics(orderInfo.id)"
                    >查看物流</div>
                    <div
                        class="order-btn"
                        v-if="orderInfo.order_type == 3"
                        @click="receiveConfirm(orderInfo.id)"
                    >确认收货</div>
                    <div
                        class="order-btn"
                        v-if="orderInfo.order_type == 4"
                        @click="goComment(orderInfo.id)"
                    >立即评价</div>
                    <div
                        class="order-btn"
                        v-if="orderInfo.order_type == 1"
                        @click="goPay(orderInfo.name,orderInfo.id,orderInfo.money_total)"
                    >付款</div>
                    <!-- <div
                        class="order-btn"
                        v-if="orderInfo.order_type == 4"
                    >申请退换货</div> -->
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'OrderDetail',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            orderType: [
                '全部',
                '待付款',
                '待发货',
                '待收货',
                '已完成',
                '已取消',
                '退换货'
            ],
            orderInfo: ''
        }
    },
    mounted() {
        this.getOrderDetail()
    },
    methods: {
        getOrderDetail() {
            let postData = this.qs.stringify({
                id: this.$route.query.orderId
            })
            this.axios.post('/api/orders/info.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.orderInfo = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        checkLogistics(id) {
            this.$router.push({
                path: '/logistics',
                query: { orderId: id }
            })
        },
        goComment(id) {
            this.$router.push({
                path: '/commentList',
                query: { orderId: id }
            })
        },
        goGoodsDetail(id, type) {
            this.$router.push({
                path: '/goodsDetail',
                query: {
                    goodsId: id,
                    goodsType: type
                }
            })
        },
        goPay(name, id, money) {
            const that = this
            if (name == '') {
                this.commonDialog.alert('提示', '请选择收货地址', function() {
                    that.$router.push({
                        path: '/address',
                        query: {
                            addressType: 'groupOrder',
                            orderId: id
                        }
                    })
                })
                return
            }
            sessionStorage.setItem('cart_price', JSON.stringify(money))
            this.$router.push({
                path: '/goPay',
                query: { orderId: id }
            })
        },
        receiveConfirm(id) {
            let postData = this.qs.stringify({
                id: id
            })
            this.axios.post('/api/orders/received.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.$router.push({
                        path: '/receiveConfirm',
                        query: { orderId: id }
                    })
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        orderCancle(id) {
            const that = this
            this.commonDialog.confirm('提示', '确定取消该订单？', function() {
                let postData = this.qs.stringify({
                    id: id
                })
                that.axios
                    .post('/api/orders/cancel.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            that.commonDialog.alert('提示', '成功取消订单')
                            that.$router.push({
                                path: '/orderList',
                                query: { orderType: 5 }
                            })
                        } else {
                            that.commonDialog.alert('提示', data.msg)
                        }
                    })
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.receiver-info-box, .order-info-box
    padding 0 0.26rem
    background #fff
    margin-bottom 0.18rem
    .receiver-info-title, .order-info-title
        line-height 1.11rem
        font-size 0.38rem
        color #333
        border-bottom 1px solid #e5e5e5
    .receiver-info-main, .order-info-main
        padding 0.37rem 0
        .receiver-info-item, .order-info-item
            display flex
            align-items top
            margin-bottom 0.26rem
            .receiver-info-item-name, .order-info-item-name
                width 1.85rem
                font-size 0.33rem
                color #999
                line-height 1.3
            .receiver-info-item-detail, .order-info-item-detail
                flex 1
                min-width 1px
                font-size 0.33rem
                color #333
                line-height 1.3
            .order-status
                color #d7463c
        .receiver-info-item:last-child, .order-info-item:last-child
            margin 0
.goods-info-box
    padding 0 0.26rem
    background #fff
    .goods-info-title
        line-height 1.11rem
        font-size 0.38rem
        color #333
        border-bottom 1px solid #e5e5e5
    .goods-item
        display flex
        align-items center
        height 3.33rem
        padding 0 0.26rem
        border-bottom 1px solid #e5e5e5
        .goods-img-box
            width 2.18rem
            height 2.18rem
            border 1px solid #e5e5e5
            overflow hidden
            .goods-img
                width 100%
                height 100%
        .goods-info
            position relative
            flex 1
            min-width 1px
            margin-left 0.26rem
            .goods-name
                font-size 0.38rem
                color #333
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
            .goods-format
                margin-top 0.18rem
                font-size 0.32rem
                color #888
                line-height 1.3
                overflow hidden
                white-space nowrap
            .goods-price
                margin-top 0.1rem
                font-size 0.38rem
                color #d7463c
    .goods-banlance-box
        padding 0.37rem 0
        border-bottom 1px solid #e5e5e5
        .goods-banlance-item
            font-size 0.33rem
            color #666
            text-align right
            margin-bottom 0.26rem
        .goods-banlance-item:last-child
            margin 0
    .order-ctr-box
        display flex
        align-items center
        justify-content flex-end
        height 1.67rem
        .order-btn
            width 2.2rem
            line-height 0.74rem
            text-align center
            background #d7463c
            font-size 0.38rem
            color #fff
            border-radius 3px
            margin-left 0.26rem
</style>


